<template>
  <div id="app">
      <el-container>
          <el-header style="background-color: #EBEBEB;height: 70px">
              <h1 style="color: #6B6B6B;text-align: center">SDN架构安全渗透测试系统</h1>
          </el-header>
          <el-container style="border: 1px solid #eee">
              <el-aside style="width: 200px">
                  <el-row style="position: fixed; margin-top: 200px">
                      <el-menu :default-active="curid.toString()" style="text-align: left; margin-left:20px;">
                          <el-menu-item index="1" @click="goAnchor('#anchor1')">
                              <!--              <i class="el-icon-setting"></i>-->
                              <span slot="title">系统配置</span>
                          </el-menu-item>
                          <el-menu-item index="2" @click="goAnchor('#anchor2')">
                              <!--              <i class="el-icon-monitor"></i>-->
                              <span slot="title">测试案例</span>
                          </el-menu-item>
                          <el-menu-item index="3" @click="goAnchor('#anchor3')">
                              <!--              <i class="el-icon-document"></i>-->
                              <span slot="title">Manager日志</span>
                          </el-menu-item>
                          <el-menu-item index="4" @click="goAnchor('#anchor4')">
                              <!--              <i class="el-icon-document"></i>-->
                              <span slot="title">App日志</span>
                          </el-menu-item>
                          <el-menu-item index="5" @click="goAnchor('#anchor5')">
                              <!--              <i class="el-icon-document"></i>-->
                              <span slot="title">Network日志</span>
                          </el-menu-item>
                      </el-menu>
                  </el-row>
              </el-aside>
              <el-main>
                  <Config id="anchor1"></Config>
                  <TestCase id="anchor2"></TestCase>
                  <ManagerLog id="anchor3"></ManagerLog>
                  <AppLog id="anchor4"></AppLog>
                  <NetWorkLog id="anchor5"></NetWorkLog>
              </el-main>
          </el-container>
      </el-container>
  </div>
</template>

<script>

import Config from "@/components/Config";
import TestCase from "@/components/TestCase";
import ManagerLog from "@/components/ManagerLog";
import AppLog from "@/components/AppLog";
import NetWorkLog from "@/components/NetWorkLog";
export default {
  name: 'app',
  components: {
    NetWorkLog,
    AppLog,
    ManagerLog,
    TestCase,
    Config

  },
  data() {
    return {
      curid: 1,//当前页面滚动到达的位置对应的id下标值；
      allmenuheight: [],//目录中所有菜单对应div的高度值；
      menu: ['#anchor1','#anchor2','#anchor3','#anchor4','#anchor5'],
      isclickscroll: false,//避免点击目录时，与滚动事件冲突
    }
  },
  methods: {
    goAnchor(selector) {
      var anchor = this.$el.querySelector(selector);
      document.body.scrollTop = anchor.offsetTop; //chrome
      document.documentElement.scrollTop = anchor.offsetTop;//firefox
      this.isclickscroll = true;
    },
    handleScroll() {
      //滚动页面，选中相应的菜单
      if (!this.isclickscroll) {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let allmenuheight = this.allmenuheight;
        for (var i = 0; i < allmenuheight.length; i++) {
          if (i == 0 && scrollTop < allmenuheight[i].height) {
            this.curid = i + 1;
            break;
          } else if (i != allmenuheight.length - 1 && scrollTop >= allmenuheight[i].height && scrollTop < allmenuheight[i + 1].height) {
            this.curid = i + 1;
            break;
          } else if (i == allmenuheight.length - 1) {
            this.curid = i + 1;
          }
        }
      }
      this.isclickscroll = false;
    },
  },
  mounted() {
    //el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
    let menu = this.menu;
    let h = '';
    for (let i = 0; i < menu.length; i++) {
      h = this.$el.querySelector(menu[i]).offsetTop;
      this.allmenuheight.push({
        index: i,
        height: h
      })
    }
    window.addEventListener('scroll', this.handleScroll);
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
